<template>
  <div class="relation">
    <div class="relation-header">
      <div class="left">
        <el-input
          style="width: 300px"
          v-model="managerValue"
          placeholder="请输入内容"
          clearable
          @change="titleChange"
        ></el-input>
      </div>

      <div class="header" @click="addMet">新增</div>
    </div>

    <a-table
      :columns="columns"
      :data-source="dataSource"
      @change="handleTableChange"
      :pagination="pagination"
      :rowKey="(dataSource) => dataSource.managerId"
    >
      <template slot="name" slot-scope="scope">
        <div class="table-title">
          {{ scope.userName }}
        </div>
      </template>

      <template slot="operation" slot-scope="scope">
        <div class="table-display">
          <div class="display-list" @click="compileMet(0, scope)">编辑</div>
          <div class="display-list" @click="compileMet(1, scope)">删除</div>
        </div>
      </template>
    </a-table>

    <!--新增-->
    <div class="add" ref="add">
      <a-modal
        :getContainer="() => $refs.add"
        v-model="addVisible"
        :title="addIndex == 0 ? '新增' : '编辑'"
        width="38%"
      >
        <div class="add-block">
          <div class="list">
            <div class="left">头像：</div>
            <a-input class="input" v-model="form.avatar" clearable />

            <el-upload
              action="https://ir3.anbio.xyz/common/upload"
              :on-change="handleChange"
              :file-list="fileList"
              class="right"
              :show-file-list="false"
            >
              <div>点击上传</div>
            </el-upload>
          </div>

          <div class="list">
            <div class="left">账号：</div>
            <a-input v-model="form.userName" clearable />
          </div>

          <div class="list">
            <div class="left">电话：</div>
            <a-input v-model="form.phone" clearable />
          </div>

          <div class="list">
            <div class="left">邮箱：</div>
            <a-input v-model="form.email" clearable />
          </div>

          <div class="list">
            <div class="left">密码：</div>
            <a-input v-model="form.password" clearable />
          </div>

          <div class="block-display">
            <div
              class="block-display-list"
              v-for="(item, index) in 2"
              :key="index"
              @click="buttonMet(index)"
            >
              {{ index == 0 ? "取消" : "确定" }}
            </div>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import {
  managerListGet,
  managerListPost,
  managerListDelete,
} from "../../api/common";

import { md5 } from "../../utils/md5";

export default {
  data() {
    return {
      columns: [
        {
          title: "管理员账号",
          scopedSlots: { customRender: "name" },
          width: 200,
        },
        {
          title: "管理员手机号",
          dataIndex: "phone",
          key: "phone",
          width: 200,
        },
        {
          title: "管理员邮箱号",
          dataIndex: "email",
          key: "email",
          width: 200,
        },
        {
          title: "注册时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 300,
        },
        {
          title: "操作",
          scopedSlots: { customRender: "operation" },
          width: 150,
        },
      ],
      dataSource: [],
      totalNum: 0,
      // 分页
      page: 1,
      limit: 10,
      pagination: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total) => `总共 ${total} 条`,
      },
      // 搜索条件
      addIndex: 0,
      managerValue: "",
      addVisible: false,
      form: {
        id: "",
        avatar: "",
        //--------
        userName: "",
        phone: "",
        email: "",
        password: "",
      },
      //上传图片
      fileList: [],
    };
  },
  created() {
    this.relationMet();
  },
  methods: {
    // d导出
    deriveMet() {},
    // 获取联系记录
    relationMet() {
      const params = {
        pageSize: this.limit,
        pageNo: this.page,
        //-------------------
        userName: "",
        phone: "",
        email: "",
      };

      managerListGet(params).then((res) => {
        if (res.resultStatus === true) {
          this.dataSource = res.resultData.managerList;
          this.pagination.total = res.resultData.totalNum;
        }
      });
    },
    // 触发
    onChangeTime(date, dateString) {
      this.timePicker = date;
      this.timePickerStartTime = date.length ? dateString[0] : "";
      this.timePickerEndTime = date.length ? dateString[1] : "";
    },

    // 获取分页
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.page = pagination.current;
      this.limit = pagination.pageSize;
      this.relationMet();
    },
    //----------------------------
    titleChange() {
      this.page = 1;
      this.limit = 10;

      this.relationMet();
    },
    // 用户点击新增
    addMet() {
      this.addIndex = 0;
      this.form.id = "";
      this.form.avatar = "";
      this.form.userName = "";
      this.form.phone = "";
      this.form.email = "";
      this.form.password = "";
      this.addVisible = true;
    },
    // 操作区域
    compileMet(index, item) {
      if (index == 0) {
        this.addIndex = 1;
        this.form.id = "";
        this.essayDetailGetMet(item);
      } else if (index == 1) {
        this.deleteMet(item.managerId);
      } else {
      }
    },
    essayDetailGetMet(item) {
      this.form.id = item.managerId;
      this.form.avatar = item.avatar;
      this.form.userName = item.userName;
      this.form.phone = item.phone;
      this.form.email = item.email;
      this.addVisible = true;
    },
    handleChange(file, fileList) {
      console.log("获取上传返回", file);
      this.fileList = fileList.slice(-3);
    },
    //------------------
    //弹出框 确认
    buttonMet(index) {
      if (index == 0) {
        this.addIndex = 0;
        this.form.id = "";
        this.form.avatar = "";
        this.form.userName = "";
        this.form.phone = "";
        this.form.email = "";
        this.form.password = "";
        this.addVisible = false;
      } else {
        this.essayPostMet(0);
      }
    },

    // 点击确定
    essayPostMet() {
      let params = {
        managerId: this.form.id,
        avatar: this.form.avatar,

        userName: this.form.userName,
        phone: this.form.phone,
        email: this.form.email,
        password: md5(this.form.password),
      };

      managerListPost(params).then((res) => {
        this.$message.success(
          `${this.addIndex == 0 ? "新增成功！" : "编辑成功！"}`
        );
        this.addVisible = false;
        this.relationMet();
      });
    },

    // 删除
    deleteMet(id) {
      const params = id;

      managerListDelete(params).then((res) => {
        if (res.resultStatus === true) {
          this.$message.success("删除成功");
          this.relationMet();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.relation {
  .relation-header {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header {
      width: 100px;
      height: 35px;
      border: 1px solid;
      margin-right: 35px;
      cursor: pointer;
      background: #775dc0;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: 500;
      font-size: 14px;
    }
  }

  .table-title {
    cursor: pointer;
  }

  .table-display {
    display: flex;

    .display-list {
      margin-right: 30px;
      cursor: pointer;
    }
  }

  .add {
    /deep/ .ant-modal-title {
      text-align: center;
      font-weight: bold;
      font-size: 15px;
      color: #fff;
    }

    /deep/ .ant-modal-header {
      padding: 0;
      height: 40px;
      background: #a6a6a6;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /deep/ .ant-modal-close-x {
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      margin-right: 10px;
      color: #fff;
    }

    /deep/ .ant-modal-body {
      background: #fff;
    }

    /deep/ .ant-modal-footer {
      display: none;
    }

    .add-block {
      margin: 0 auto;
      height: 100%;

      .list {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        height: 35px;

        /deep/ .ant-calendar-picker {
          width: 100%;
        }

        /deep/ .ant-input {
          width: 92%;
          height: 100%;
        }

        /deep/ .el-upload {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .left {
          width: 50px;
          height: 100%;
          text-align: right;
          display: flex;
          align-items: center;
        }

        .input {
          width: 70%;
        }
        .right {
          padding: 0 10px;
          box-sizing: border-box;
          border: 1px solid #ccc;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;
          border-radius: 4px;
          font-size: 12px;
          cursor: pointer;
        }

        .right:hover {
          background: #775dc0;
          color: #fff;
        }
      }
    }

    .block-display {
      display: flex;
      justify-content: space-around;
      margin-top: 40px;

      .block-display-list {
        width: 100px;
        height: 35px;
        border: 1px solid;
        margin-right: 25px;
        cursor: pointer;
        background: #775dc0;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
      }

      .block-display-list:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
